<template>
  <div class="home">
    <!-- 头部 -->
    <div class="home-header">
      <div class="home-title">收藏管理</div>
      <el-button type="primary" link @click="onReset">重置快开索引</el-button>
      <!-- 竖线间隔 -->
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" link @click="onAddFile">添加文件</el-button>
      <!-- 竖线间隔 -->
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" link @click="onAddFolder">添加文件夹</el-button>
      <!-- 竖线间隔 -->
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" link @click="onAddWebsite">添加网址</el-button>
      <!-- 竖线间隔 -->
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" link @click="onAddApp">添加应用</el-button>
      <!-- 竖线间隔 -->
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" link @click="onExport">导出</el-button>
      <!-- 竖线间隔 -->
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" link @click="onImport">导入</el-button>
    </div>

    <Home />

    <!-- 添加网址对话框 -->
    <AddWebsiteDialog
      ref="addWebsiteDialog"
      v-model="website"
      @confirm="onAddWebsiteDialogConfirm"
    />

    <!-- 添加应用对话框 -->
    <AddAppDialog ref="addAppDialog" />

    <!-- 内容 -->
    <div class="home-content" v-if="false">
      <el-table :data="favorateList" style="width: 100%">
        <!-- 路径 -->
        <el-table-column prop="path" label="路径" :min-width="300">
          <template #default="scope">
            <div class="path-cell">
              <div class="file-info">
                <img :src="scope.row.icon" class="file-icon" />
                <span class="file-name">{{ scope.row.name }}</span>
              </div>
              <div class="file-path">{{ scope.row.path }}</div>
            </div>
          </template>
        </el-table-column>

        <!-- 标签 -->
        <el-table-column prop="tag" label="标签" :min-width="300">
          <template #default="scope">
            <el-tag
              v-for="tag in scope.row.tags"
              :key="tag"
              class="tag-item"
              closable
              @close="handleTagClose(scope.row, tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="scope.row.inputVisible"
              ref="inputRef"
              v-model="scope.row.inputValue"
              class="tag-input"
              size="small"
              @keyup.enter="handleInputConfirm(scope.row)"
              @blur="handleInputConfirm(scope.row)"
            />
            <!-- 新增标签按钮 -->
            <el-button
              v-else
              class="tag-new-btn"
              size="small"
              @click="showInput(scope.row)"
              :icon="Plus"
            />
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button type="primary" size="small" @click="openItem(scope.row)"
              >打开</el-button
            >
            <el-button type="danger" size="small" @click="deleteItem(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref, nextTick } from "vue";
import { Plus } from "@element-plus/icons-vue";
import AddWebsiteDialog from "./components/AddWebsiteDialog.vue";
import AddAppDialog from "./components/AddAppDialog.vue";
import {
  favorateList,
  loadList,
  onReset,
  onExport,
  onImport,
  handleTagClose,
  handleInputConfirm,
  openItem,
  deleteItem,
  onAddFile,
  onAddFolder,
  onAddWebsite,
  onAddApp,
  onAddWebsiteDialogConfirm,
  website,
  addWebsiteDialog,
  addAppDialog,
} from "./js/record";
import Home from "./components/Home.vue";

const inputRef = ref([]);

// 显示tags输入框
const showInput = (row) => {
  row.inputVisible = true;
  nextTick(() => {
    const inputs = inputRef.value;
    if (inputs) {
      const input = Array.isArray(inputs) ? inputs[inputs.length - 1] : inputs;
      input.focus();
    }
  });
};

// 初始化
const init = () => {
  loadList();
};
init();
</script>
<style scoped lang="scss">
.home {
  background-color: #fff;

  .home-header {
    display: flex;
    align-items: center;
    padding: 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(56, 56, 56, 0.1);

    .home-title {
      font-size: 18px;
      font-weight: 600;
      flex-grow: 1;
      color: #666;
    }
    .home-btn {
      font-size: 16px;
      font-weight: 500;
      color: #409eff;
    }
  }

  .home-content {
    margin-top: 64px;
    padding: 0 8px;
    .path-cell {
      .file-info {
        display: flex;
        align-items: center;
        margin-bottom: 4px;

        .file-icon {
          width: 16px;
          height: 16px;
        }

        .file-name {
          font-weight: 700;
          margin-left: 4px;
          color: #555;
        }
      }

      .file-path {
        font-size: 12px;
        color: #555;
        word-break: break-all; // 允许在任意字符间换行
        white-space: pre-wrap; // 保留空白符序列，但是正常地进行换行
        line-height: 1.5; // 设置行高以提高可读性
      }
    }

    .tag-item {
      margin-right: 6px;
    }

    .tag-input {
      width: 100px;
      margin-right: 6px;
    }

    .tag-new-btn {
      margin-left: 0;
      height: auto;
    }
  }
}
</style>
